<template>
<div class="col-lg-5 col-md-6 col-sm-3 col-xs-6" style="margin-right: auto;min-width: 400px;">
    <div class="slider" @mouseover="showButton()" @mouseout="hideButton()">
        <ul>
            <li v-for="(location, index) in sliders" :key="index">
              <div  v-show="location.flag">
                <img :src=location.image>
                </div>
            </li>
        </ul>
        <div class="buttonr" v-show="button" @click="right()"></div>
        <div class="buttonl" style="right:0;" v-show="button" @click="left()"></div>
    </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      sliders: [
        new this.ContributeSlider('images/usageScenarios1.jpg', true),
        new this.ContributeSlider('images/usageScenarios2.jpg', false),
        new this.ContributeSlider('images/usageScenarios3.jpg', false),
        new this.ContributeSlider('images/usageScenarios1.jpg', false)
      ],
      button: false,
      number: 0
    }
  },
  methods: {
    showButton () {
      this.button = true
    },
    modify (key) {
      this.sliders[this.number].flag = false
      this.number = this.number + key
      if (this.number === this.sliders.length) {
        this.number = 0
      } else if (this.number === -1) {
        this.number = this.sliders.length - 1
      }
      this.sliders[this.number].flag = true
    },
    hideButton () {
      this.button = false
    },
    right () {
      this.modify(2)
      console.log('加一')
    },
    left () {
      this.modify(-1)
      console.log('减一')
    },
    ContributeSlider (image, flag) {
      this.image = image
      this.flag = flag
    }
  }
}
</script>

<style scoped>
.slider{
    width: 400px;
    height: 300px;
    border: 3px solid white;
    overflow: hidden;
    position: relative;
    flex: 1;
}
li{
    list-style: none;
    float: left;
    position:absolute;
}
.buttonr , .buttonl{
    position: absolute;
    width: 40px;
    height: 40px;
    background-color:whitesmoke;
    opacity: 0.7;
    top: 50%;
    right: 0;
}
.buttonl{
    left: 0;
}
</style>
